<template>
	<view class="content">
		<u-navbar :fixed="false" title="实验报告" titleStyle="color:#fff;">
			<view class="u-nav-slot" slot="left">
				<view class="NavbarLeft">
					<!-- 回退按钮 -->
					<u-icon name="arrow-left" :duration="0" size="20" color="#fff" @click="GoBack"></u-icon>
				</view>
			</view>
		</u-navbar>

		<!-- 分段器 -->
		<u-subsection :list="TabList" mode="button" :current="TabActive" @change="sectionChange"></u-subsection>

		<view class="MainBox">
			<view v-if="TabActive == 0">
				<view class="CardBox">
					<view class="CardIndex">
						1
					</view>

					<view class="CardMain">
						34
					</view>
				</view>
			</view>

			<view v-else-if="TabActive == 1">
				23423
			</view>

			<view v-else>
				34i38
			</view>
		</view>

	</view>
</template>

<script>
	const open = uni.requireNativePlugin("Html5App-openFile");
	// 实验室报告页面
	export default {
		data() {
			return {
				TabActive: 0, // 分段器索引
				TabList: ['待检验', '已检验', '检验报告'], // 分段器数据
			};
		},
		mounted() {
			var that = this;

			// that.DownloadTbs(); // 安装Tbs
			// uni.hideKeyboard()


			// 设备连接状态变更触发，传入的值 是 Boolean 型
			uni.$on("changeDeivceStatus", function(connected) {
				that.currentWebview.evalJS(`vm.GetDeviceStatus(${connected})`)
			});

			// 监听连接的设备输出的值
			uni.$on('BluetoothData', function(data) {
				// console.log(data)
				try {
					let currentWebview = that.$scope.$getAppWebview().children()[0];
					currentWebview.evalJS(`vm.setRange('${data}')`)
				} catch (e) {
					//TODO handle the exception
				}
				// var obj = {
				// 	Model: that.ChoiceData.DeviceName // 设备类型（如：游标卡尺、千分尺）
				// }
				// that.evalJs(data.Nums)
			})
		},
		methods: {
			DownloadTbs() { // 安装内核tbs
				let HasTbs = open.isLoadTbs();
				if (!HasTbs) {
					// 安装文件浏览内核文件,安卓端需要
					let filepath = plus.io.convertLocalFileSystemURL("static/arm64-v8a.tbs");
					open.installLocalTbs({
						tbsFilePath: filepath,
						isdelete: false //安装好是否要删除该文件
					}, function(e) {
						console.log(JSON.stringify(e))
					});
				}
			},
			evalJs(data) { // 向html中传入值，之后看看能不能封装一下
				var that = this;
				try {
					let currentWebview = that.$scope.$getAppWebview().children()[0];
					currentWebview.evalJS(`vm.setRange('${data}')`)
				} catch (e) {
					//TODO handle the exception
				}
			},
			sectionChange(index) { // 切换分段器
				var that = this;
				that.$utils.showLoading();

				setTimeout(() => {
					this.TabActive = index;
					that.$utils.hideLoading();
				}, 500)
			},
			GoBack() {
				uni.navigateBack()
			},
		},
	}
</script>

<style lang="scss">
	* {
		padding: 0;
		margin: 0;
		box-sizing: border-box;
	}


	.content {
		/* 给顶部盒子安全高度 */
		// padding-top: var(--status-bar-height);
		display: flex;
		flex-direction: column;
		height: 100vh;

		.MainBox {
			flex: 1 !important;
			overflow: auto;
			height: 100%;
			background-color: pink;
			padding: 10px;

			.CardBox {
				border-radius: 12px;
				box-shadow: 1px 1px 13px -7px #999;
				padding: 10px 15px;
				min-height: 60px;
				background-color: #fff;
				display: flex;
				justify-content: space-between;

				.CardIndex {
					width: fit-content;
					min-width: 20px;
					height: 20px;
					text-align: center;
					background-color: #3093ef;
					color: #fff;
					border-radius: 4px;
					padding: 4px;
					font-size: 14px;
				}

				.CardMain {
					flex: 1;
					background-color: #3093ef;
					margin-left: 4px;
					border-radius: 4px;
				}
			}
		}
	}
</style>